<template>
  <div>
    <h4 style="margin:0 0 10px 0">
      <el-row>
        <el-col :span="19">
          <span v-if="doctData">查看医生</span>
        </el-col>
        <el-col :span="5" style="text-align:right">
          <i class="el-icon-error" style="background:#e6e6e6" @click="resetForm('ruleForm2')"></i>
        </el-col>
      </el-row>
    </h4>
    <div style="border:1px solid #E1E1E1;width:60%;margin:0 auto;padding:20px 60px 0 0">
      <el-form :model="ruleForm2"  ref="ruleForm2" label-width="120px" class="demo-ruleForm" >
        <el-form-item label="姓名:" prop="name">
          <el-input disabled v-model.number="ruleForm2.name" ></el-input>
        </el-form-item>
        <el-form-item label="工作时间:">
          <el-input disabled v-model.number="ruleForm2.work_time" ></el-input>
        </el-form-item>
        <el-form-item label="擅长:" prop="skill">
          <el-input disabled v-model="ruleForm2.skill" ></el-input>
        </el-form-item>
        <el-form-item label="简介:" prop="checkPass">
          <el-input disabled type="textarea" :rows="7"  placeholder="请输入内容" v-model="ruleForm2.introduction"></el-input>
        </el-form-item>
       
        <el-form-item label="照片:" prop="odress" >
          <div>
             <ul class="el-upload-list el-upload-list--picture-card">
              <li :tabindex="1" class="el-upload-list__item is-success">
                <img :src="ruleForm2.header_url" alt="" class="el-upload-list__item-thumbnail">
                <span class="el-upload-list__item-actions">
                  <span class="el-upload-list__item-preview" @click="shouimg(ruleForm2.header_url)"><i class="el-icon-zoom-in"></i></span>
                </span>
              </li>
            </ul>
          </div>
        </el-form-item>

        <el-form-item label="医生执业证:" prop="odress">
          <div>
            <ul class="el-upload-list el-upload-list--picture-card">
              <li :tabindex="1" class="el-upload-list__item is-success">
                <img :src="ruleForm2.cert_url" alt="" class="el-upload-list__item-thumbnail">
                <span class="el-upload-list__item-actions">
                  <span class="el-upload-list__item-preview" @click="shouimg(ruleForm2.cert_url)"><i class="el-icon-zoom-in"></i></span>
                </span>
              </li>
            </ul>
          </div>
        </el-form-item>

        <el-form-item label="医生资格证:" prop="odress" >
          <div>
            <el-row>
              <el-col :span="24">
                <ul class="el-upload-list el-upload-list--picture-card">
                  <li style="float:left" :tabindex="index" class="el-upload-list__item is-success" v-for="(item,index) in fileList3" :key="index">
                    <img :src="item" alt="" class="el-upload-list__item-thumbnail">
                    <span class="el-upload-list__item-actions">
                      <span class="el-upload-list__item-preview" @click="shouimg(item)"><i class="el-icon-zoom-in"></i></span>
                    </span>
                  </li>
                </ul>
              </el-col>
            </el-row>
          </div>
        </el-form-item>
        
        <el-form-item label="状态:" prop="skill">
          <el-select v-model="status" placeholder="请选择" @change="changeFun">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="驳回内容:" v-show="resultStatus">
          <el-input v-model.number="result_msg" ></el-input>
        </el-form-item>

        <el-form-item >
          <el-row >
            <el-col :span="12"><el-button type="primary" @click="submitForm">提交审核</el-button></el-col>
          </el-row>
        </el-form-item>
      </el-form>
    </div>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="">
      </el-dialog>
  </div>
</template>

<script>
import Http from '@/Http/Http'
export default {
  props:['doctData'],
  data() {
    return {
      options:[{
        label:'驳回',
        value:0
      },
      {
        label:'通过',
        value:1
      }],
      status:1,
      resultStatus:false,
      result_msg:'',
      dialogVisible:false,
      dialogImageUrl:'',
      fileList3:[],
      ruleForm2: {
        skill: '', //擅长
        cert_url:'',
        doctor1:'',
        introduction:'', //简介
        checkPass:'',
        name:'',
        checkSta: '',
        work_time: '',
        header_url:'' //头像

      }
    };
  },
  created(){
    this.getToken()
  },
  methods: {
    getToken() {
     
      if (this.doctData) {
        this.ruleForm2.name = this.doctData.name ;
        this.ruleForm2.introduction = this.doctData.introduction ;
        this.ruleForm2.skill = this.doctData.skill ;
        this.ruleForm2.work_time = this.doctData.work_time ;
        this.ruleForm2.header_url = this.doctData.header_url ;
        this.ruleForm2.cert_url = this.doctData.cert_url; 
        this.fileList3 = this.doctData.certs;
      }
    },

    changeFun(val) {
      if(!val){
        this.resultStatus = true;
      } else {
        this.resultStatus = false;
      }
    },
     // 图片列表 方法  ----------------------
    shouimg(val){
      this.dialogVisible = true;
      this.dialogImageUrl = val;
    },

    submitForm() {
      if (!this.status && !this.result_msg){ this.$message.error('请输入驳回内容'); return }
      const obj = {
        "status":this.status,
        "id":this.doctData.id
      }
      if(!this.status){
        obj.result_msg = this.result_msg
      }
      Http.AuditDoctor(obj)
      .then( res => {
        if (res.data.code == 200) {
          this.$message.success('提交成功')
        } else {
          this.$message.error('提交失败')
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.$emit('colseFun')
    },
    handleClose(){
      this.$emit('colseFun')
    }
  }
}
</script>

<style>
.disabled .el-upload--picture-card {
    display: none;
}
.avatar-uploaderInfo .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploaderInfo .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-iconInfo {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatarInfo {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
